<template>
    <el-dialog
            :title="!dataForm.id ? '新增罚款记录' : '修改罚款记录'"
            :close-on-click-modal="false"
            v-model="visible"
            width="692px"
    >
        <el-form :model="dataForm" ref="dataForm" :rules="dataRule" label-width="60px">
            <el-form-item label="类型" prop="typeId">
                <el-select v-model="dataForm.typeId" placeholder="罚款类型" size="medium" style="width:40%">
                    <el-option v-for="one in amectTypeList" :label="one.type" :value="one.id"/>
                </el-select>
                <span class="desc">必须选择一个罚款类型，罚款金额可以自动生成</span>
            </el-form-item>
            <el-form-item label="金额" prop="amount">
                <el-input v-model="dataForm.amount" size="medium" style="width:40%" placeholder="罚款金额" clearable/>
                <span class="desc">元</span>
            </el-form-item>
            <el-form-item label="原因" prop="reason">
                <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="罚款原因"
                        v-model="dataForm.reason"
                        size="medium"
                        resize="none"
                        maxlength="200"
                        show-word-limit
                        clearable="clearable"
                />
            </el-form-item>
            <el-form-item label="成员" prop="members" v-if="dataForm.id == 0">
                <el-transfer
                        v-model="dataForm.members"
                        :data="users"
                        :titles="['员工', '当事人']"
                        filterable
                        filter-placeholder="请输入姓名"
                />
            </el-form-item>
        </el-form>
        <template #footer>
			<span class="dialog-footer">
				<el-button size="medium" @click="visible = false">取消</el-button>
				<el-button type="primary" size="medium" @click="dataFormSubmit">确定</el-button>
			</span>
        </template>
    </el-dialog>
</template>

<script>
    export default {
        data: function () {
            return {
                visible: false,
                dataForm: {
                    id: null,
                    typeId: null,
                    amount: null,
                    reason: null,
                    members: []
                },
                amectTypeList: [],
                users: [],
                dataRule: {
                    typeId: [{required: true, message: '罚款类型为必填'}],
                    amount: [
                        {
                            required: true,
                            pattern: '(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)',
                            message: '罚款金额格式错误'
                        }
                    ],
                    reason: [{required: true, message: '罚款原因为必填'}],
                    members: [
                        {required: true, trigger: 'blur', message: '必须设置当事人'},
                        {required: false, trigger: 'change', message: '必须设置当事人'}
                    ]
                }
            };
        },
        methods: {
            init: function (id) {
                let that = this;
                that.dataForm.id = id || 0;
                that.visible = true;
                that.$nextTick(() => {
                    that.$refs['dataForm'].resetFields();
                    that.$http('amect_type/searchAllAmectType', 'GET', {}, true, function (resp) {
                        that.amectTypeList = resp.list;
                    });
                    that.$http('user/searchAllUser', 'GET', null, true, function (resp) {
                        let temp = [];
                        for (let one of resp.list) {
                            temp.push({key: one.id, label: one.name});
                        }
                        that.users = temp;
                    });
                    if (id) {
                        that.$http('amect/searchById', 'POST', {id: id}, true, function (resp) {
                            that.dataForm.typeId = resp.typeId;
                            that.dataForm.amount = resp.amount + "";
                            that.dataForm.reason = resp.reason;
                        });
                    }
                });
            },
            dataFormSubmit: function () {
                let that = this
                let data = {
                    userId: that.dataForm.members,
                    amount: that.dataForm.amount,
                    typeId: that.dataForm.typeId,
                    reason: that.dataForm.reason
                }
                if (that.dataForm.id) {
                    data.id = that.dataForm.id
                }
                that.$refs["dataForm"].validate(valid => {
                    if (valid) {
                        that.$http(`amect/${!that.dataForm.id ? 'insert' : 'update'}`, "POST", data, true, function (resp) {
                            if (resp.rows > 0) {
                                that.visible = false;
                                that.$emit('refreshDataList');
                                that.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1200
                                });
                            } else {
                                that.$message({
                                    message: '操作失败',
                                    type: 'error',
                                    duration: 1200
                                });
                            }
                        })
                    }
                })
            }

        }
    };
</script>

<style>
    .desc {
        margin-left: 15px;
    }
</style>
